<template>
  <div class="container">
    <div class="container_left">
      <!-- 左侧部分分为4部分，10%，30%，30%，30% -->
      <div class="header">
          <!-- 左侧文字 -->
          <div style="display: flex;  align-items: center; position: relative;">
              <div class="header-text1">巡视任务统计</div>
              <div class="header-line-decor"></div>
          </div>
           <!-- 下面的线 -->
           <div class="header-line">
              <div class="header-line-main"></div>
              <div class="header-line-main1"></div>
          </div>
      </div>
      <!-- 饼状图 -->
      <div class="left_top1">
          <div class="chatTitle">
              任务执行状况
          </div>
          <div ref="chartRef" class="chart"></div>
      </div>
      <div class="left_top2">
        <div ref="twoLineChartRef" class="chart"></div>
      </div>
      <!-- 又是文字加上线的部分 -->
      <div class="header">
          <!-- 左侧文字 -->
          <div style="display: flex;  align-items: center; position: relative;">
              <div class="header-text1">通信塔巡视信息</div>
              <div class="header-line-decor"></div>
          </div>
           <!-- 下面的线 -->
           <div class="header-line">
              <div class="header-line-main"></div>
              <div class="header-line-main1"></div>
          </div>
      </div>
      <!-- 下方的柱状图 -->
      <div class="left_top3">
          <div ref="chartBarRef" class="chart1"></div>
      </div>
    </div>
    <div class="container_middle">
       <!-- 中侧部分分为2部分，10%，90% -->
       <div class="header" style="height: 8%;">
          <!-- 左侧文字 -->
          <div style="display: flex;  align-items: center; position: relative;height: 2.2rem;">
              <div class="header-text2">{{ dateRange }}</div>
              <div class="header-btn">
                  <div class="btn-top" :class="{ active: selectTime === 'week' }" @click="btnClick('week', defaultSelectedRegion)">最近七天</div>
                  <div class="btn-top" :class="{ active: selectTime === 'month' }" @click="btnClick('month', defaultSelectedRegion)">最近一月</div>
                  <div class="btn-top" :class="{ active: selectTime === 'year' }" @click="btnClick('year',defaultSelectedRegion)">最近一年</div>
              </div>
          </div>
           <!-- 下面的线 -->
           <div class="header-line">
              <div class="header-line-main"></div>
              <div class="header-line-main1"></div>
          </div>
       </div>
      <div class="middile_top">
        <div class="map-message">
            <div style="width: 95%;">阜阳市地图</div>
            <div class="map-select"   @click="handleRegionClick">关注区域：{{selectedRegionDisplay }}</div>
        </div>
      </div>
      <div class="middile_main">
        <div ref="chartMapRef" class="map-container"></div>
      </div>
    </div>
    <div class="container_right">
       <!-- 右侧部分分为3部分，10%，35%，55% -->
       <div class="header">
          <!-- 左侧文字 -->
          <div style="display: flex;  align-items: center; position: relative;">
              <div class="header-text1">缺陷统计</div>
              <div class="header-btn">
                 <div class="changeChat"  :class="{ active: activeChart === 'level' }"  @click="switchChart('level')">缺陷等级</div>
                 <div class="changeChat"  :class="{ active: activeChart === 'status' }"  @click="switchChart('status')">缺陷状态</div>
              </div>
          </div>
           <!-- 下面的线 -->
           <div class="header-line">
              <div class="header-line-main"></div>
              <div class="header-line-main1"></div>
          </div>
       </div>
      <div class="right_top"> 
        <div ref="manualReviewChart" class="chart" v-if="activeChart === 'status'"></div>
        <div ref="chartThreeLineRef" class="chart" v-if="activeChart === 'level'"></div>
    </div>
    <div class="header">
          <!-- 左侧文字 -->
          <div style="display: flex;  align-items: center; position: relative;">
              <div class="header-text1">通信塔类型</div>
              <div class="header-line-decor"></div>
          </div>
           <!-- 下面的线 -->
           <div class="header-line">
              <div class="header-line-main"></div>
              <div class="header-line-main1"></div>
          </div>
      </div>
      <div class="right_middle">
        <div ref="chartLRRef" class="chart1"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import fuyangGeoJson from './mapjson/fuyang.json';
import request from '@/utils/request';

const selectedRegionDisplay  = ref('阜阳市')
const isRegionSelected = ref(true); // 是否选择了具体区域

const handleRegionClick = () => {
  const myChart = echarts.getInstanceByDom(chartMapRef.value);
  
  // 取消之前可能存在的任何区域高亮
  if (defaultSelectedRegion.value !== '阜阳市') {
    myChart?.dispatchAction({
      type: 'downplay',
      geoIndex: 0,
      name: defaultSelectedRegion.value
    });
  }
  
  // 重置为阜阳市状态
  defaultSelectedRegion.value = '阜阳市';
  selectedRegionDisplay.value = '阜阳市';
  isRegionSelected.value = false; // 表示现在是"阜阳市"状态
  
  // 调用接口获取阜阳市全部数据（传递空字符串表示不筛选区域）
  getAllmessage(selectTime.value, '');
};


const activeChart = ref<'level' | 'status'>('level');
const selectTime = ref()


const switchChart = (type:any) => {
  activeChart.value = type

  if(defaultSelectedRegion.value == '阜阳市'){

    getAllmessage(selectTime.value,'')

  }else {
    getAllmessage(selectTime.value,defaultSelectedRegion.value)
  
  }
}

const dateRange = ref('');

// 生成日期范围字符串的函数
const getDateRangeString = (range: string) => {
  const now = new Date();
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}年${month}月${day}日`;
  };

  let startDate = new Date();
  
  if (range === 'week') {
    startDate.setDate(now.getDate() - 6);
  } else if (range === 'month') {
    startDate.setMonth(now.getMonth() - 1);
  } else if (range === 'year') {
    startDate.setFullYear(now.getFullYear() - 1);
  }

  return `${formatDate(startDate)}-${formatDate(now)}`;
};

  // 点击按钮获取所有表格相关的数据
  const allData = ref<any>([])
  // 左上角使用的数据
  const chartData = ref<any[]>([]);
  const total = ref<number>(0);
  //这个是右上角的图用的数据
  const manualReviewData = ref({
  yibanManualReviewCount: 0,
  weijiManualReviewCount: 0,
  yanzhongManualReviewCount: 0,
});

// 右上角使用的
const manualReviewDataOne = ref({
  wuxuchuliManualReviewCount: 0,
  weichuliManualReviewCount: 0,
  xiaoqueManualReviewCount: 0,
})
//已巡未巡柱状图
const barData = ref<any>({});

//右下角的对应的表格数据
const towerTypeCount = ref()
//这里是左边折线图显示用的数据
const inspectionTrendData = ref()
const btnClick = (range: string ,county: string) =>{
  if(county == "阜阳市"){
    getAllmessage(range,'')
  }else {
    getAllmessage(range,county)
  }
}

const getAllmessage = (range: string, region: string) => {
  selectTime.value = range;
  dateRange.value = getDateRangeString(range);

  request.post('/manager/homeData', {
    timeRange: range,
    county: region
  }).then((res) => {
    allData.value = res.data;
    if (allData.value.length > 0) {      
      const dataItem = allData.value[0];
      total.value = dataItem.allTaskCount;

      chartData.value = [
        { value: dataItem.executeTaskCount, name: '已巡', itemStyle: { color: '#29d08a' } },
        { value: dataItem.notExecuteTaskCount, name: '未巡', itemStyle: { color: '#ffc107' } }
      ];

      manualReviewData.value = res.data[1];
      manualReviewDataOne.value = res.data[2];
      barData.value = res.data[4];
      towerTypeCount.value = res.data[5];
      inspectionTrendData.value = res.data[3];

      // ✅ 等数据准备好了再初始化图表
      initChart();
      initBarChart();
      initLRChart();
      initThreeLineChart();
      initManualReviewChart();
      initTwoLineChart();
    }
  });
};



// DOM 引用
const chartRef = ref<HTMLDivElement | null>(null);

// 图表实例
let chartInstance: echarts.ECharts | null = null;

// 初始化图表(饼状图)
const initChart = () => {
  if (!chartRef.value) return;

  chartInstance = echarts.init(chartRef.value);

  const option = {
    backgroundColor: "#0d2238",
    title: {
      text: `巡视任务\n${total.value}`,
      left: "center",
      top: "center",
      textStyle: {
        color: "#fff",
        fontSize: 16,
        align: "center",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      orient: "horizontal",
      bottom: "1%",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "任务执行状态",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: { 
          show: true,
          color: '#fff',
          formatter: '{b}\n{c} 个\n({d}%)'
        },
        emphasis: {
          label: { show: true, fontSize: "16", fontWeight: "bold" ,  formatter: '{b}\n{c} 个\n({d}%)'},
        },
        labelLine: { show: false },
        data: chartData.value.map(item => ({
          ...item,
          itemStyle: {
            color: item.value === 0 ? 'rgba(255, 255, 255, 0.1)' : item.itemStyle.color
          }
        })),
      },
    ],
  };

  chartInstance.setOption(option);

  // 窗口大小变化时调整图表尺寸
  window.addEventListener("resize", () => {
    chartInstance?.resize();
  });
};




// 初始化曲线图
// 初始化曲线图
const twoLineChartRef = ref<HTMLDivElement | null>(null);
let myTwoLineChart: echarts.ECharts | null = null;

const initTwoLineChart = () => {
  if (!twoLineChartRef.value) return;

  myTwoLineChart = echarts.init(twoLineChartRef.value);

  const rawData = inspectionTrendData.value || {};
  const dates = Object.keys(rawData).sort();
  const customData = dates.map(date => rawData[date].customCount || 0);
  const routineData = dates.map(date => rawData[date].routineCount || 0);

  const option: echarts.EChartsOption = {
    backgroundColor: "#0d2238",
    tooltip: {
      trigger: 'axis',
      axisPointer: { 
        type: 'cross', 
        label: { 
          backgroundColor: '#6a7985' 
        } 
      }
    },
    legend: {
      data: ['自定义巡检', '例行巡检'],
      textStyle: { 
        color: '#fff',
        fontSize: 12
      },
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dates,
        axisLabel: { 
          color: '#fff',
          fontSize: 10
        },
        axisLine: { 
          lineStyle: { 
            color: '#4e89b3' 
          } 
        },
      }
    ],
    yAxis: [
      {
        minInterval: 1,
        interval: 1,
        type: 'value',
        axisLabel: { 
          color: '#fff',
          fontSize: 10
        },
        axisLine: { 
          lineStyle: { 
            color: '#4e89b3' 
          } 
        },
        splitLine: { 
          lineStyle: {
            color: 'rgba(78, 137, 179, 0.3)'
          }
        }
      }
    ],
    series: [
      {
        name: '自定义巡检',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 2,
          color: '#ffb86c'
        },
        itemStyle: {
          color: '#ffb86c',
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#ffb86c',
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        data: customData
      },
      {
        name: '例行巡检',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 2,
          color: '#80d0ff'
        },
        itemStyle: {
          color: '#80d0ff',
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#80d0ff',
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        data: routineData
      }
    ]
  };

  myTwoLineChart.setOption(option);
  window.addEventListener("resize", () => {
    myTwoLineChart?.resize();
  });
};




// 初始化曲线图
const chartBarRef = ref<HTMLDivElement | null>(null);
    let myBarChart: echarts.ECharts | null = null;

// 创建图表
const initBarChart = () => {
  if (!chartBarRef.value) return;

  myBarChart = echarts.init(chartBarRef.value);

  // 获取数据
  const rawData = barData.value || {};

  // 构造 source 数组
  const source = [['type', '已巡', '未巡']];
  Object.keys(rawData).forEach((typeName) => {
    const item = rawData[typeName];
    source.push([
      typeName,
      item.executionCount || 0,
      item.notExecutionCount || 0,
    ]);
  });

  // 配置图表
  const option = {
    backgroundColor: "#0d2238",
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    },
    legend: {
      data: ['已巡', '未巡'],
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
      },
    },
    dataset: {
      source,
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        interval: 0,
      },
    },
    yAxis: { 
      minInterval: 1, // 最小间隔为 1，防止浮点
      interval: 1,    // 强制每个刻度间隔为 1
      type: 'value',
      axisLabel: {
        formatter: function(value: number) {
          return Math.floor(value); // 确保显示整数
        }
      }
    },
    series: [
      {
        type: 'bar',
        name: '已巡',
        itemStyle: { color: 'skyblue' },
        encode: { x: 'type', y: '已巡' },
      },
      {
        type: 'bar',
        name: '未巡',
        itemStyle: { color: '#e47e52' },
        encode: { x: 'type', y: '未巡' },
      },
    ],
  };

  // 设置图表
  myBarChart.setOption(option);

  // 响应式 resize
  window.addEventListener("resize", () => {
    myBarChart?.resize();
  });
};


const chartThreeLineRef = ref<HTMLDivElement | null>(null);
let myThreeLineChart: echarts.ECharts | null = null;


const initThreeLineChart = () => {
  if (!chartThreeLineRef.value) return;

  const yiban = manualReviewData.value.yibanManualReviewCount;
  const yanzhong = manualReviewData.value.yanzhongManualReviewCount;
  const weiji = manualReviewData.value.weijiManualReviewCount;

  const total = yiban + yanzhong + weiji || 1; // 避免除以 0

  const yibanPercent = yiban + (100 - yiban); // 剩下用透明补齐
  const yanzhongPercent = yanzhong + (100 - yanzhong);
  const weijiPercent = weiji + (100 - weiji);

  myThreeLineChart = echarts.init(chartThreeLineRef.value);

  const option = {
    backgroundColor: "#0d2238",
    graphic: [
    {
      type: 'text',
      left: 'center',
      top: '88%',
      style: {
      }
    }
  ],
    title: {
      text: "",
      left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "一般",
        type: "pie",
        radius: ["60%", "70%"],
        startAngle: 0,
        hoverAnimation: false,
        data: [
          { 
            value: yiban, 
            name:  `一般：\n ${yiban} \n ${((yiban / total) * 100).toFixed(1)}% `, 
            itemStyle: { 
              color: yiban === 0 ? 'rgba(0, 153, 255, 0.1)' : 'rgba(0, 153, 255, 0.8)' 
            } 
          },
          { value: yanzhong + weiji, name: "", itemStyle: { color: "transparent" } },
        ],
      },
      {
        name: "严重",
        type: "pie",
        radius: ["45%", "55%"],
        startAngle: 0,
        hoverAnimation: false,
        data: [
          { 
            value: yanzhong, 
            name: `严重：\n${yanzhong} \n ${((yanzhong / total) * 100).toFixed(1)}%`, 
            itemStyle: { 
              color: yanzhong === 0 ? 'rgba(255, 204, 102, 0.1)' : 'rgba(255, 204, 102, 0.8)' 
            } 
          },
          { value: yiban + weiji, name: "", itemStyle: { color: "transparent" } },
        ],
      },
      {
        name: "危急",
        type: "pie",
        radius: ["30%", "40%"],
        startAngle: 0,
        hoverAnimation: false,
        data: [
          { 
            value: weiji, 
            name: `危急：\n ${weiji} \n ${((weiji / total) * 100).toFixed(1)}%`, 
            itemStyle: { 
              color: weiji === 0 ? 'rgba(255, 69, 0, 0.1)' : 'rgba(255, 69, 0, 0.8)' 
            } 
          },
          { value: yanzhong + yiban, name: "", itemStyle: { color: "transparent" } },
        ],
      },
    ],
  };

  myThreeLineChart.setOption(option);

  window.addEventListener("resize", () => {
    myThreeLineChart?.resize();
  });
};


    // 最后一个柱状图，从左向右的
  const chartLRRef = ref<HTMLDivElement | null>(null);
  let myLRChart: echarts.ECharts | null = null;
const initLRChart = () => {
  if (!chartLRRef.value) return;

  myLRChart = echarts.init(chartLRRef.value);

  const rawData = towerTypeCount.value || {}; // 假设你用 ref 接数据
  const yAxisData = Object.keys(rawData).filter(key => key !== "allCount");

  
  const seriesData = yAxisData.map(name => rawData[name]);


  const option = {
    backgroundColor: "#0d2238",
    title: {
      text: `共 ${rawData.allCount || 0} 个通信塔`,
      left: "center",
      top: "10px",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "15%",
      bottom: "10%",
    },
    xAxis: {
      minInterval: 1, // 最小间隔为 1，防止浮点
      interval: 1,    // 强制每个刻度间隔为 1
      type: "value",
      splitLine: { show: false },
      axisLine: {
        lineStyle: { color: "#4e89b3" },
      },
      axisLabel: {
        color: "#fff",
        formatter: function(value: number) {
          return Math.floor(value); // 确保显示整数
        }
      },
    },
    yAxis: {
      type: "category",
      data: yAxisData,
      axisLine: {
        lineStyle: { color: "#4e89b3" },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 10,
      },
    },
    series: [
      {
        name: "通信塔数量",
        type: "bar",
        data: seriesData,
        barWidth: 15,
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              0,
              [
                { offset: 0, color: "#0fefff" },
                { offset: 1, color: "#ffdd00" },
              ]
            ),
          },
        },
        label: {
          show: true,
          position: "right",
          color: "#fff",
          fontSize: 12,
          formatter: "{c}",
        },
      },
    ],
  };

  myLRChart.setOption(option);
  window.addEventListener("resize", () => {
    myLRChart?.resize();
  });
};

// 这里是切换成饼状图

const manualReviewChart = ref<HTMLDivElement | null>(null)
let manualChart: echarts.ECharts | null = null
// 图表初始化函数
const initManualReviewChart = () => {
  if (!manualReviewChart.value) return
  manualChart = echarts.init(manualReviewChart.value)

  const total = manualReviewDataOne.value.wuxuchuliManualReviewCount + 
                manualReviewDataOne.value.weichuliManualReviewCount + 
                manualReviewDataOne.value.xiaoqueManualReviewCount;

  const option: echarts.EChartsOption = {
    backgroundColor: "#0d2238",
    title: {
      text: `共 ${total} 个缺陷`,
      left: 'center',
      top: '10',
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },
    series: [
      {
        name: '人工审核',
        type: 'pie',
        radius: '60%',
        center: ['50%', '55%'],
        data: [
          {
            value: manualReviewDataOne.value.wuxuchuliManualReviewCount,
            name: '无需处理',
            itemStyle: { color: '#4caf50' },
          },
          {
            value: manualReviewDataOne.value.weichuliManualReviewCount,
            name: '未处理',
            itemStyle: { color: '#ff9800' },
          },
          {
            value: manualReviewDataOne.value.xiaoqueManualReviewCount,
            name: '已缺陷',
            itemStyle: { color: '#f44336' },
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        label: {
          color: '#fff',
        },
      },
    ],
  }

  manualChart.setOption(option)
  window.addEventListener('resize', () => {
    manualChart?.resize()
  })
}




    // 地图相关函数
    const chartMapRef = ref<any>(null);
    const defaultSelectedRegion = ref('');
    let currentHighlightedRegion = ref('阜阳市') // 新增变量：记录当前高亮区域    
    let myChart: echarts.ECharts | null = null; // 缓存图表实例

const onLoadMap = () => {
  if (myChart && !myChart.isDisposed()) {
    myChart.off('click'); // 清除旧事件监听器
    myChart.clear();      // 清除旧图表配置
  } else {
    myChart = echarts.init(chartMapRef.value);
  }

  echarts.registerMap('fuyang', fuyangGeoJson as any);

  // 提取所有区域名称
  const regions = fuyangGeoJson.features.map(f => ({
    name: f.properties.name
  }));

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}'
    },
    geo: {
      map: 'fuyang',
      roam: false,
      zoom: 1.2,
      center: [115.8, 32.9],
      label: {
        show: true,
        color: '#fff',
        fontSize: 12
      },
      itemStyle: {
        areaColor: '#0b2547',
        borderColor: '#00ffff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          show: true,
          color: '#fff',
          fontWeight: 'bold'
        },
        itemStyle: {
          areaColor: '#00a8ff',
          borderWidth: 2,
          borderColor: '#fff'
        }
      },
      select: {
        itemStyle: {
          areaColor: '#00a8ff',
          borderWidth: 2,
          borderColor: '#fff'
        }
      },
      regions // 👈 显式注册区域，确保 dispatchAction 生效
    }
  };

  myChart.setOption(option);

  // 默认高亮阜阳市
  myChart.dispatchAction({
    type: 'highlight',
    geoIndex: 0,
    name: '阜阳市'
  });

  currentHighlightedRegion.value = '阜阳市';
  defaultSelectedRegion.value = '阜阳市';

  myChart.on('click', (params: any) => {
    if (!params?.name) return;

    const clickedRegion = params.name;

    if (clickedRegion === currentHighlightedRegion.value) {
      myChart?.dispatchAction({
        type: 'downplay',
        geoIndex: 0,
        name: clickedRegion
      });

      myChart?.dispatchAction({
        type: 'highlight',
        geoIndex: 0,
        name: '阜阳市'
      });

      currentHighlightedRegion.value = '阜阳市';
      defaultSelectedRegion.value = '阜阳市';
      selectedRegionDisplay.value = '阜阳市';
      isRegionSelected.value = false;

      getAllmessage(selectTime.value, '');
    } else {
      myChart?.dispatchAction({
        type: 'downplay',
        geoIndex: 0,
        name: currentHighlightedRegion.value
      });

      myChart?.dispatchAction({
        type: 'highlight',
        geoIndex: 0,
        name: clickedRegion
      });

      currentHighlightedRegion.value = clickedRegion;
      defaultSelectedRegion.value = clickedRegion;
      selectedRegionDisplay.value = clickedRegion;
      isRegionSelected.value = true;

      getAllmessage(selectTime.value, clickedRegion);
    }
  });

  window.addEventListener('resize', () => {
    myChart?.resize();
  });
};


// 挂载后初始化图表
onMounted(() => {
  onLoadMap(); // 只初始化地图，绑定点击事件
  selectTime.value = 'year';
  dateRange.value = getDateRangeString('year');
  getAllmessage('year', ''); // 接口成功后再 init 各个图表
});

</script>

<style  scoped>

.map-container {
    width: 100%;
    height: 100%; /* 根据你的大屏区域调整 */
  }
.container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #0d2238;
}
.container_left {
    width: 35%;
    height: 100%;
    /* background-color: aqua; */
}
.container_middle {
    width: 40%;
    height: 100%;
}
.container_right {
    width: 25%;
    height: 100%;
}
.header {
    width: 100%;
    height: 5%;

}
.header-text1 {
    font-size: 1.4rem;
    color: #52b8e4; /* 文字颜色 */
    margin-left: 1rem;
}

.changeChat {
  color: white;
  width: 6rem;
  text-align: center;
  height: 30px;
  background-color: #82ace6; /* 主横线颜色 */
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%); /* 定义平行四边形形状 */
  margin-top: 0.5rem;
  cursor: pointer;
}

.changeChat.active {
  background-color: #0fefff;
  color: #000;
  font-weight: bold;
}

.header-text2 {
    line-height: 1.4rem;
    font-size: 1rem;
    color: #52b8e4; /* 文字颜色 */
}
.header-btn {
    position: absolute;
    width: 50%;
    right: 4%;
    display: flex;
    justify-content: space-around;
}
.btn-top {
    margin-top: 0.5rem;
    color: #fff;
    border:1px solid #fff;
    font-size: 0.9rem;
    width: 4.5rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-top-left-radius:0.85rem ;
    border-top-right-radius: 0.85rem;
    border-bottom-left-radius: 0.85rem;
    cursor: pointer;

}
.btn-top:hover {
  background-color: #e0e0e0;
}

.btn-top.active {
  background-color: #1a5276; /* 选中时的背景色 */
  color: white; /* 选中时的文字颜色 */
  font-weight: bold;
}
.header-line {
  width: 95%;
  margin-top:9px;
}

.header-line-main {
  margin-left: 1rem;
  height: 2px;
  background-color: #52b8e4; /* 主横线颜色 */
}
.header-line-main1 {
  margin-left: 1rem;
  width: 30%;
  height: 3px;
  background-color: #52b8e4; /* 主横线颜色 */
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); /* 定义平行四边形形状 */
}

.header-line-decor {
  width: 67px;
  height: 8px;
  position: absolute;
  right: 5%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 4px,  /* 透明部分 */
    #226e8f 4px 8px     /* 蓝色平行四边形部分 */
  );
  background-size: 8px 8px; /* 单个虚线模块的大小 */
  transform: skewX(-30deg); /* 倾斜生成平行四边形效果 */
  margin-left: 8px; /* 间距 */
}


/* 左侧部分样式 */
.left_top1 {
    position: relative;
    width: 100%;
    height: 30%;
}
.chatTitle {
    position: absolute;
    z-index: 999;
    top:5%;
    left: 5%;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}
.left_top2 {
    width: 100%;
    height: 30%;
}
.left_top3 {
    width: 100%;
    height: 30%;
}
.chart {
  width: 90%;
  height: 90%;
  margin: 0 auto;
}
.chart1{
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
/* 中间部分样式 */
.middile_top {
    width: 95%;
    height: 8%;
    overflow: hidden;
}
.map-message {
  width: 100%;
  height: 2.5rem;
  background-color: rgba(84, 129, 147, 0.582);
  margin-top: 1rem;
  position: relative;
  color: rgb(119, 201, 234);
  font-size: 1rem;
  line-height: 2.5rem;
  padding-left: 2rem;
  border-radius: 0.3rem;
}
.map-select {
  width: 10rem;
  height: 2.5rem;
  border-radius: 0.3rem;
  background-color: skyblue;
  position: absolute;
  top: 0;
  right: 5.5%;
  text-align: center;
  color: rgb(0, 53, 74);
  cursor: pointer;
}
.middile_main {
    width: 95%;
    height: 80%;
}
/* 右侧部分样式 */
.right_top {
    width: 100%;
    height: 35%;
}
.right_middle {
    width: 100%;
    height: 55%;
}

.chart-legend-summary {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #ccc;
  display: flex;
  justify-content: space-around;
}
.chart-legend-summary div:nth-child(1) { color: rgba(0, 153, 255, 0.9); }  /* 一般 */
.chart-legend-summary div:nth-child(2) { color: rgba(255, 204, 102, 0.9); } /* 严重 */
.chart-legend-summary div:nth-child(3) { color: rgba(255, 69, 0, 0.9); }    /* 危急 */

</style>